<template>
  <!--  我是大屏-->
  <dv-full-screen-container class="container">
    <div class="module-box">
      <div style="flex: 0 1 30%">
        <div class="flex flex-direction">
          <dv-border-box-8 class="border_five" title="左侧-第一个">
            <dv-digital-flop :config="digitConfig" style="width:100%;height:100%;text-align:center;" />
          </dv-border-box-8>
          <dv-border-box-11 style="height: 50vh;" title="左侧-第二个">
            <dv-conical-column-chart :config="chartConfig" style="width:400px;height:200px;padding:80px 20px;" />
          </dv-border-box-11>
        </div>
      </div>
      <div style="flex: 0 1 40%">
        <dv-border-box-11 style="height: 60vh; width: 100%" title="中央大版图">
          <dv-flyline-chart-enhanced :config="flyConfig" style="width:100%;height:100%;" />
        </dv-border-box-11>
      </div>
      <div style="flex: 0 1 30%">
        <dv-border-box-11 style="height: 30vh;" title="右侧-第一个">
          <div class="cap_group_wrap">
            <dv-capsule-chart :config="capConfig" style="width:300px;height:200px" />  
          </div>
        </dv-border-box-11>
        <dv-border-box-11 style="height: 30vh;" title="右侧-第二个">
          <div class="cap_group_wrap">
            <dv-scroll-board :config="boardConfig" style="width:500px;height:200px" />
          </div>
        </dv-border-box-11>
      </div>
    </div>
    <div class="module-box">
      <div style="flex: 0 1 50%">
        <dv-border-box-11 style="height: 38vh;" title="底部-第一个">
          <div class="cap_group_wrap">
            <dv-scroll-ranking-board :config="rankConfig" style="width:500px;height:300px" />
            <dv-decoration-9 style="width:150px;height:150px;fontWeight:bold;fontSize:24px;color:#fff;">66%</dv-decoration-9>
          </div>
        </dv-border-box-11>
      </div>
      <div style="flex: 0 1 50%">
        <dv-border-box-11 style="height: 38vh;" title="底部-第二个">
          <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center">
            <dv-water-level-pond :config="waterConfig" style="width:150px;height:200px" />
            <dv-active-ring-chart :config="ringConfig" style="width:200px;height:200px" />
            <dv-charts :option="chartOption" style="width:220px;height:220px"/>
            <div style="height:200px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;">
              <dv-percent-pond :config="pondOneConfig" style="width:100px;height:50px;" />
              <dv-percent-pond :config="pondTwoConfig" style="width:100px;height:50px;" />
            </div>
            
          </div>
        </dv-border-box-11>
      </div>
    </div>
  </dv-full-screen-container>

</template>

<script>
const fullWidth = 300
const borderGap = 3
const borderWidth = 3
const usefulWidth = fullWidth - (borderGap + borderWidth) * 2

const pieceLength = [0.25, 0.5, 0.25]
const pieceGap = 3

const lineDash = pieceLength.map(l => [usefulWidth * l, pieceGap]).reduce((all, current) => [...all, ...current], [])
export default {
  name: 'App',
  data() {
    return {
      digitConfig: {
        number: [100],
        toFixed: 2,
        content: '每年卖出{nt}亿，绕地球100圈'
      },
      capConfig: {
        data: [{
          name: '南阳',
          value: 167
        },
        {
          name: '周口',
          value: 67
        },
        {
          name: '漯河',
          value: 123
        },
        {
          name: '郑州',
          value: 55
        },
        {
          name: '西峡',
          value: 98
        }]
      },
      boardConfig: {
        data: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3']
        ],
      },
      rankConfig: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 45
          },
          {
            name: '漯河',
            value: 29
          }
        ]
      },
      flyConfig: {
        points: [
          {
            name: '郑州',
            coordinate: [0.48, 0.35],
            halo: {
              show: true,
            },
            icon: {
              src: require('@/assets/img/mapCenterPoint.png'),
              width: 30,
              height: 30
            },
            text: {
              show: false
            }
          },
          {
            name: '新乡',
            coordinate: [0.52, 0.23]
          },
          {
            name: '焦作',
            coordinate: [0.43, 0.29]
          },
          {
            name: '开封',
            coordinate: [0.59, 0.35]
          },
          {
            name: '许昌',
            coordinate: [0.53, 0.47]
          },
          {
            name: '平顶山',
            coordinate: [0.45, 0.54]
          },
          {
            name: '洛阳',
            coordinate: [0.36, 0.38]
          },
          {
            name: '周口',
            coordinate: [0.62, 0.55],
            halo: {
              show: true,
              color: '#8378ea'
            }
          },
          {
            name: '漯河',
            coordinate: [0.56, 0.56]
          },
          {
            name: '南阳',
            coordinate: [0.37, 0.66],
            halo: {
              show: true,
              color: '#37a2da'
            }
          },
          {
            name: '信阳',
            coordinate: [0.55, 0.81]
          },
          {
            name: '驻马店',
            coordinate: [0.55, 0.67]
          },
          {
            name: '济源',
            coordinate: [0.37, 0.29]
          },
          {
            name: '三门峡',
            coordinate: [0.20, 0.36]
          },
          {
            name: '商丘',
            coordinate: [0.76, 0.41]
          },
          {
            name: '鹤壁',
            coordinate: [0.59, 0.18]
          },
          {
            name: '濮阳',
            coordinate: [0.68, 0.17]
          },
          {
            name: '安阳',
            coordinate: [0.59, 0.10]
          }
        ],
        lines: [
          {
            source: '新乡',
            target: '郑州'
          },
          {
            source: '焦作',
            target: '郑州'
          },
          {
            source: '开封',
            target: '郑州'
          },
          {
            source: '周口',
            target: '郑州',
            color: '#fb7293',
            width: 2
          },
          {
            source: '南阳',
            target: '郑州',
            color: '#fb7293',
            width: 2
          },
          {
            source: '济源',
            target: '郑州'
          },
          {
            source: '三门峡',
            target: '郑州'
          },
          {
            source: '商丘',
            target: '郑州'
          },
          {
            source: '鹤壁',
            target: '郑州'
          },
          {
            source: '濮阳',
            target: '郑州'
          },
          {
            source: '安阳',
            target: '郑州'
          },
          {
            source: '许昌',
            target: '南阳',
            color: '#37a2da'
          },
          {
            source: '平顶山',
            target: '南阳',
            color: '#37a2da'
          },
          {
            source: '洛阳',
            target: '南阳',
            color: '#37a2da'
          },
          {
            source: '驻马店',
            target: '周口',
            color: '#8378ea'
          },
          {
            source: '信阳',
            target: '周口',
            color: '#8378ea'
          },
          {
            source: '漯河',
            target: '周口',
            color: '#8378ea'
          }
        ],
        icon: {
          show: true,
          src: require('@/assets/img/mapPoint.png')
        },
        text: {
          show: true,
        },
        k: 0.5,
        bgImgSrc: require('@/assets/img/map.jpg')
      },
      chartConfig: {
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 71
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 35
          },
          {
            name: '漯河',
            value: 15
          }
        ],
        img: [
          require('@/assets/img/1st.png'),
          require('@/assets/img/2st.png'),
          require('@/assets/img/3st.png'),
          require('@/assets/img/4st.png'),
          require('@/assets/img/5st.png'),
          require('@/assets/img/6st.png'),
          require('@/assets/img/7st.png')
        ],
        showValue: true
      },
      ringConfig: {
        radius: '40%',
        activeRadius: '45%',
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          }
        ],
        digitalFlopStyle: {
          fontSize: 20
        },
        showOriginValue: true
      },
      chartOption: {
        title: {
          text: '剩余油量表',
          style: {
            fill: '#fff'
          }
        },
        series: [
          {
            type: 'gauge',
            data: [ { name: 'itemA', value: 55 } ],
            center: ['50%', '55%'],
            axisLabel: {
              formatter: '{value}%',
              style: {
                fill: '#fff'
              }
            },
            axisTick: {
              style: {
                stroke: '#fff'
              }
            },
            animationCurve: 'easeInOutBack'
          }
        ]
      },
      pondOneConfig: {
        value: 66,
        borderWidth: 5,
        borderRadius: 10,
        borderGap: 5
      },
      pondTwoConfig: {
        value: 80,
        colors: ['#01c4f9', '#c135ff'],
        lineDash
      },
      waterConfig: {
        data: [55],
        shape: 'round'
      },
      showLoading: false
    } 
  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}

#app {
  background: #333;
}

.module-box {
  display: flex;
}

.border_five {
  height: 10vh !important;
}

.cap_group_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 60px 40px 40px 40px; 
}

.container {
  width: 100vw;
  height: 100vh;
  background: url("@/assets/img/bg.png") no-repeat !important;
  background-size: cover;
}
</style>